<template>
  <div class="overview-content">
    <el-row :gutter="32">
      <el-col :xs="24" :sm="24" :lg="24" style="margin-bottom: 20px">
        <div class="chart-wrapper">
          <el-table
            :data="list"
            style="width: 100%"

            class="card-table"
            :border="false"
            stripe
            :default-sort="{ prop: 'five' }"
          >
            <el-table-column
              show-overflow-tooltip
              type="index"
              label="序号"
              min-width="50%"
              align="center"
            />

            <el-table-column
              show-overflow-tooltip
              label="姓名"
              prop="name"
              width="100"
              max-width="100"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="gender"
              label="性别"
              width="50"
              :formatter="genderFormat"
              align="center"
            />
            <el-table-column
              show-overflow-tooltip
              prop="mobile"
              label="电话"
              align="center"
              :formatter="tel"
              min-width="150"
              width="150"
            />
            <el-table-column
              show-overflow-tooltip
              prop="email"
              label="邮箱"
              align="center"
              min-width="150"
            />
            <el-table-column
              show-overflow-tooltip
              prop="idCard"
              label="身份证"
              align="center"
              width="200"
              min-width="150"
            />
            <el-table-column
              show-overflow-tooltip
              prop="houseNum"
              label="房产"
              align="center"
              width="50"
            >
              <template slot-scope="scope">
                <router-link
                  :to="{
                    path: '/house/page',
                    query: { owner: scope.row.name },
                  }"
                  class="linkBtn"
                >
                  <span class="houseNum fzClocd">{{ scope.row.houseNum }}</span>
                </router-link>
              </template>
            </el-table-column>
            <el-table-column
              show-overflow-tooltip
              prop="appAccount"
              label="APP账号"
              align="center"
              min-width="100"
            />
            <el-table-column
              show-overflow-tooltip
              prop="createdTime"
              label="添加时间"
              :formatter="myTime"
              align="center"
              min-width="100"
            />
            <el-table-column
              show-overflow-tooltip
              prop="source"
              label="来源"
              align="center"
              min-width="100"
              :formatter="ownerSourceFormatT"
            />
            <el-table-column
              show-overflow-tooltip
              prop="tags"
              label="标签"
              align="center"
              min-width="100"
            />
            <el-table-column
              show-overflow-tooltip
              label="操作"
              align="center"
              width="150"
            >
              <template slot-scope="scope">
                <el-button
                  type="text"
                  size="small"
                  @click="showRow(scope.row)"
                >查看
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="handleClick(scope.row)"
                >编辑
                </el-button>
                <el-button
                  type="text"
                  size="small"
                  @click="del(scope.row)"
                >删除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-pagination
            :v-show="total > 0"
            background
            :current-page="currentPage"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>

    <!---->
    <myModal :obj="deleteobj" @close="close" @save="deleteHouse">
      <div class="mpdalBody">
        <span style="display:block;text-align:center">确定要删除该业务吗？</span>
      </div>
    </myModal>
    <!---->
  </div>
</template>

<script>
import { page, delManager } from '@/api/manager'
import myModal from '@/components/Modal'
import {
  dateFormatRow,
  myTime,
  genderFormat,
  ownerSourceFormatT
} from '@/utils/common'

export default {
  components: { myModal },
  data() {
    return {
      id: '',
      genderFormat,
      ownerSourceFormatT,
      myTime,
      dateFormatRow,
      currentPage: 1,
      pageSize: 10,
      total: 0,
      objMo: {
        show: false,
        title: '选择房产来源',
        width: '536px'
      },
      deleteobj: {
        show: false,
        title: '删除业务',
        width: '447px'
      },
      list: [],
      sizeForm: {},
      radio: 3
    }
  },
  watch: {
    currentPage: {
      handler(newVal) {
        newVal && this.getList()
      }
    },
    pageSize: {
      handler(newVal) {
        newVal && this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    del(row) {
      this.id = row.id
      this.deleteobj.show = true
    },
    deleteHouse() {
      delManager(this.id).then(response => {
        this.$notify.success({ message: '删除成功' })
        this.getList()
        this.deleteobj.show = false
      })
    },
    tel(tel) {
      return (
        tel.mobile.substr(0, 3) +
        '-' +
        tel.mobile.substr(3, 4) +
        '-' +
        tel.mobile.substr(7, 4)
      )
    },
    showRow(params) {
      this.$router.push({
        path: `/manager/ownerShow`,
        query: { id: params.id }
      })
    },
    getList() {
      this.loading = true
      const query = { page: this.currentPage, limit: this.pageSize, type: 0 }
      page(query).then((response) => {
        response.data.records.forEach((item) => {
          item.tags = item.tags.replace(/,/g, '/')
        })
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    srcGetList(params) {
      this.loading = true
      if (params.gender === '') {
        params.gender = null
      }
      if (params.source === '') {
        params.source = null
      }
      if (params.type === '') {
        params.type = null
      }
      page(params).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    },
    handleClick(row) {
      this.objMo.show = true
      this.$emit('showModal', row)
    },
    handleSizeChange(val) {
      this.pageSize = val
    },
    handleCurrentChange(val) {
      this.currentPage = val
    },
    close() {
      this.objMo.show = false
      this.deleteobj.show = false
    },
    save() {
      console.log('123')
    },
    houseTypeFormat(row) {},
    srcTable(list) {
      page(list).then((response) => {
        this.list = response.data.records
        this.total = response.data.total
        this.loading = false
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep .el-table th.is-leaf,
::v-deep .el-table td,
::v-deep .el-table__body {
  border: 0;
}

::v-deep .el-table::before,
::v-deep .el-table__fixed-right::before {
  display: none;
}

::v-deep th {
  background: #f7f7f7;
  font-weight: normal;
  color: #101010;
}

.houseNum {
  font-size: 13px;
  color: #5ac6b7;
}

::v-deep .el-table th {
  background: #f7f7f7;
}
</style>

